<template>
  <div>
    <div class="demo-input-suffix" style="margin: 20px 155px 30px 155px;text-align: center" >
      <el-button style="margin-right: 10px" @click="$router.back()">返回</el-button>
      <el-input style="width: 1200px" placeholder="请输入连衣裙名称" prefix-icon="el-icon-search" v-model.trim="searchForm.goodname" class="demo-form-inline">
      </el-input>
      <el-button  type="primary" class="button" @click="onSubmit">搜索</el-button>
    </div>

    <el-row style="margin: 20px 0px 0px 170px;">
      <el-col :span="4" v-for="item in dress" :key ="item.id" class="card" :model="searchForm">
        <el-card :body-style="{ padding: '0px' }" >
          <img :src="item.imghref" class="image">
          <div style="padding: 14px">
            <span>{{item.goodname}}</span>
            <br>
            <div class="bottom clearfix">
              <span style="color: red;font-size: 30px">￥{{item.price}}</span>
              <el-button type="text" class="button" @click="handleEdit(item.id)">立即购买</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pager.pageNum"
        :page-sizes="pager.options"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager,next,jumper "
        :total="pager.count" style="padding-top: 50px">
    </el-pagination>
  </div>
</template>

<script>
import goodsApi from "@/http/goodsApi";

export default {
  name: "dress",
  created() {
    //当vue实例创建成功时
    this.getList();
  },
  data(){
    return{
      searchForm:{},
      dress:[],
      pager: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods:{
    getList(){
      goodsApi.getListByDress(this.searchForm, {
        pageNum: this.pager.pageNum,
        pageSize: this.pager.pageSize
      }).then(res =>{
        console.log(res);
        if (res.data.code == 200){
          this.pager = res.data.data
          this.dress = this.pager.data
        }
      })
    },
    onSubmit(){
      this.getList();
    },
    handleSizeChange(val){
      this.pager.pageSize = val
      this.getList();
    },
    handleCurrentChange(val){
      this.pager.pageNum = val
      this.getList();
    },
    handleEdit(id) {
      console.log(id);
      this.$router.push(`/goods/toEdit/${id}.html`)
    },

  }
}
</script>

<style>
.el-pagination{
  text-align: center;
}
</style>